<template>
    <div>
        <h3>用户列表</h3>
        <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="user_id" label="ID" align="center"></el-table-column>
				<el-table-column prop="user_nick_name" label="用户名"></el-table-column>
				<el-table-column prop="user_acc" label="账号"></el-table-column>
				
				<el-table-column label="头像(查看大图)" align="center">
					<template #default="scope">
						<el-image
							class="table-td-thumb"
							:src="scope.row.user_avator"
							:z-index="10"
							:preview-src-list="[scope.row.user_avator]"
							preview-teleported
						>
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="user_create_time" label="注册时间"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页器 -->
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
    </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { userList , userTotal , removeUser} from '../api/index'

interface TableItem {
	user_id: number;
	user_nick_name: string;
	user_avator: string;
	user_create_time: string;
}

const query = reactive({
	pageIndex: 1, // 开始索引值
	pageSize: 5, // 每一页的数量
});
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = (page_num=1,page_size=5) => {
	// 获取数据分页
	userList({page_num, page_size}).then(content => {
		// 观察用户列表数据
		// console.log('1.0',content)
		let {code , msg , result} = content
		if(code == 200){
			// 填充表格
			tableData.value = result;
		}
	})
};
getData();

// 初始化分页器
const initPage = () => {
	userTotal().then(content=>{
		// console.log('2.0',content);
		let {code , total} = content;
		if(code == 200){
			// 设置分页
			pageTotal.value = total;
		}
	})
}

initPage();

// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData(val, 5);
};

// 删除操作
const handleDelete = (index: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {type: 'warning'})
		.then(() => {
			// ElMessage.success('删除成功');
			// console.log('x:',tableData.value.slice(index,index+1))
			// 获取用户信息
			let user:any = tableData.value.slice(index,index+1)[0];
			let user_id = user.user_id;
			let user_acc = user.user_acc;
			// console.log({user_id, user_acc});
			// 删除用户
			removeUser({user_id, user_acc}).then(content=>{
				console.log(content)
				let {msg, code} = content;
				if(code ==200){
					tableData.value.splice(index, 1);
				}
				ElMessage(msg);
			})
			
		})
		.catch(() => {

		});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({

});

let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	idx = index;
	form.name = row.name;
	form.address = row.address;
	editVisible.value = true;
};


</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>